﻿iec.sp.ui.columnOrdering = function ()
{
    this._moveColumnLink = '<div id="Move" > > </div>';
    this._removeColumnLink = '<div id="Remove" > X </div>';
}

iec.sp.ui.columnOrdering.prototype =
{
    initialize: function ()
    {
        this._initialFormatting();

        var listCollection = $("#listColumns li:not(.ui-state-disabled)");

        $.each(listCollection, function (index, val)
        {
            var moveColumnLink = $(columnOrdering._moveColumnLink);
            $(listCollection[index]).append(moveColumnLink);
            moveColumnLink.bind('click', { self: this }, self.columnOrdering._addviewColumns);
        });

        $("#listColumns, #viewColumns").sortable({
            placeholder: "ui-state-highlight",
            connectWith: ".SortColumns",
            items: "li:not(.ui-state-disabled)",
            helper: 'clone',
            appendTo: 'body', 
            zIndex: 10000,
            start: function (event, ui) { $(ui.helper).addClass("ui-draggable-helper"); },
            containment: ".ms-main"
        });

        $("#listColumns").disableSelection();
        $("#listColumns").sortable('disable');

        $("#viewColumns").bind("sortreceive", function (event, ui)
        {
            $('ul#viewColumns li#' + ui.item[0].id + ' div').remove();

            var removeColumnLink = $(columnOrdering._removeColumnLink);
            ui.item.append(removeColumnLink);

            // remove columns from the view column collection
            removeColumnLink.bind('click', { self: this }, self.columnOrdering._removeviewColumns);

            self.columnOrdering._addOrderNumber();
            self.columnOrdering._reorderViewColumnGuids();
        });

        $("#listColumns").bind("sortreceive", function (event, ui)
        {
            $('#' + ui.item[0].id + ' div').remove();

            $('#' + ui.item[0].id + ' span.OrderNumber').remove();

            var moveColumnLink = $(columnOrdering._moveColumnLink);
            ui.item.append(moveColumnLink);
            moveColumnLink.bind('click', { self: this }, self.columnOrdering._addviewColumns);

            self.columnOrdering._addOrderNumber();
            self.columnOrdering._reorderViewColumnGuids();
        });

        $("#viewColumns").bind("sortupdate", function (event, ui)
        {
            self.columnOrdering._addOrderNumber();
            self.columnOrdering._reorderViewColumnGuids();
        });

        $("#viewColumns").bind("sortremove", function (event, ui)
        {
            self.columnOrdering._addOrderNumber();
            self.columnOrdering._reorderViewColumnGuids();
        });

        $("#viewColumns").bind("sortstart", function (event, ui)
        {
            // Count needs to be checked for 2 as script dyanamically adds the placeholder <li> in this senario
            if (columnOrdering._ViewColumnCount() <= 2)
            {
                alert("You must select at least one column to display for this view.");
            }
        });

    },

    dispose: function ()
    {

    },

    _attachEventHandlers: function ()
    {

    },

    _detachEventHandlers: function ()
    {

    },

    _initialFormatting: function ()
    {

        this._addOrderNumber();
        this._reorderViewColumnGuids();

        $("ul.ViewColumns li").each(function (index)
        {
            var removeColumnLink = $(columnOrdering._removeColumnLink);
            $(this).append(removeColumnLink);
            removeColumnLink.bind('click', { self: this }, columnOrdering._removeviewColumns);
        });
    },

    _removeviewColumns: function (e)
    {
        // View columns count needs to be checked for 1 as there are no placeholder added in this senario
        if (columnOrdering._ViewColumnCount() > 1)
        {
            var self = e.data.self;

            var parent = (this.parentNode);
            $(this).remove();

            $("#" + parent.id + " span.OrderNumber").remove();

            $(parent).remove();
            $("#viewColumns").sortable('refresh');

            var moveColumnLink = $(columnOrdering._moveColumnLink);
            $(parent).append(moveColumnLink);
            moveColumnLink.bind('click', { self: this }, columnOrdering._addviewColumns);

            $("#listColumns").append(parent);

            columnOrdering._addOrderNumber();
            columnOrdering._reorderViewColumnGuids();
        }
        else
        {
            alert("You must select at least one column to display for this view.");
        }
    },

    _addviewColumns: function (e)
    {
        var self = e.data.self;

        var parent = (this.parentNode);
        $(this).remove();

        var removeColumnLink = $(columnOrdering._removeColumnLink);
        $(parent).append(removeColumnLink);
        removeColumnLink.bind('click', { self: this }, columnOrdering._removeviewColumns);

        $("#viewColumns").append(parent);

        columnOrdering._addOrderNumber();
        columnOrdering._reorderViewColumnGuids();
    },

    _addOrderNumber: function ()
    {

        var viewColumnCollection = $("ul.ViewColumns li");
        var orderNumbers = new Array();

        $("ul.ViewColumns li").each(function (index)
        {
            var currentElement = $(this);
            var currentElementText = null;

            $(this.childNodes).each(function ()
            {
                if (this.className == "ElementText")
                {
                    currentElementText = $(this).text();
                }

                if (this.id != "Remove")
                {
                    $(this).remove();
                }
            });
            currentElement.append('<span class="OrderNumber">(' + (index + 1) + ')</span>');
            currentElement.append('<span class="ElementText">' + currentElementText + '</span>');
        });

    },

    _reorderViewColumnGuids: function ()
    {
        var hiddenFieldID = $("#viewColumns").parent().children()[1].id;
        var hiddenField = $("#" + hiddenFieldID)[0];
        var viewColumnCollection = $("#viewColumns li");
        var idText = "";

        for (i = 0; i < viewColumnCollection.length; i++)
        {
            idText += viewColumnCollection[i].id;
            idText += "#";
        }

        hiddenField.value = idText;
    },

    _ViewColumnCount: function ()
    {
        var viewColumnCollection = $("#viewColumns li");
        return viewColumnCollection.length
    }
}